
<template>
  <div class="wrapper" v-chart-resize v-if="mainBoxIsShow">
    <div class="head-area">
    </div>

    <div class="ctl-area">
      <div class="ctl-child">

        <div class="ctl-child-qj">
          <div class="ctl-child-qj-title">全景屏控制</div>
          <div class="ctl-child-qj-scrswith" v-on:click="qjscrbtn">
            <div class="ctl-child-qj-txt">全景屏开关</div>
          </div>
        </div>

        <div class="ctl-child-sy">
          <div class="ctl-child-qj-title">术野屏控制</div>
          <div class="ctl-child-sy-scrswith">
            <div class="ctl-child-qj-txt" v-on:click="syscrbtn">术野屏开关</div>
          </div>
        </div>

      </div>
    </div>

    <div class="tab-area">
      <div class="btn-pmkz"></div>
      <div class="btn-hzda"></div>
      <div class="btn-hzda"></div>
      <div class="btn-hzda"></div>
      <div class="btn-hzda"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.wrapper {
  width: vw(1280);
  height: vh(800);
  background-image: url("@/assets/main/big_bg.png");
  background-size: cover;
  text-align: center;
  box-sizing: border-box;
}
.head-area {
  width: vw(1280);
  height: vh(78);
}
.head-child {
  width: vw(1280);
  height: vh(48);
}
.ctl-area {
  width: vw(1280);
  height: vh(602);

  display: flex;
  text-align: center;
  justify-content: center;
}
.ctl-child {
  margin-top: vh(50);
  margin-left: vw(39);
  margin-right: vw(39);

  width: vw(1202);
  height: vh(502);

  background-image: url("@/assets/main/ctl_bg.png");
  background-size: 100% 100%;

  display: flex;
}

.ctl-child-qj {
  margin-left: vw(20);
  width: vw(330);
  height: vh(502);
}

.ctl-child-sy {
  margin-left: vw(503);
  width: vw(330);
  height: vh(502);
}

.ctl-child-qj-title {
  margin-top: vh(7);
  margin-left: auto;
  margin-right: auto;
  font-size: vh(28);
  color: #09FEFF;
  width: vw(140);
  height: vh(40);
}
.ctl-child-qj-scrswith {
  margin-top: vh(23);
  width: vw(330);
  height: vh(82);
  background-image: url("@/assets/main/qj_swi_stat_off.png");
  background-size: 100% 100%;

  display: flex;
}
.ctl-child-qj-txt{
  margin-top: vh(23);
  margin-left: vw(59);
  font-size: vh(28);
  color: #D6F6FF;
}
.ctl-child-sy-scrswith {
  margin-top: vh(23);
  width: vw(330);
  height: vh(82);
  background-image: url("@/assets/main/sy_swi_stat_off.png");
  background-size: 100% 100%;

  display: flex;
}
.tab-area {
  width: vw(1280);
  height: vh(120);
  background-image: url("@/assets/main/tab_area_bg.png");
  background-size: cover;

  display: flex;
  justify-content: center;
}
.tab-area div {
  width: vw(240);
  height: vh(120);
}
.btn-pmkz {
  background-image: url("@/assets/main/pmkz_on.png");
  background-size: cover;
}
.btn-hzda {
  background-image: url("@/assets/main/hzda_off.png");
  background-size: cover;
}

</style>

<script>

export default {
  data() {
    return {
      mainBoxIsShow: true
    }
  },
  mounted() {
  },
  methods: {
    qjscrbtn() {
      var pageCtl = window.chrome.webview.hostObjects.pageCtl;
      pageCtl.QjScrWindow_Show();
    },
    syscrbtn() {
    }
  }
}

</script>
